<template>
  <div :class="['video-desc', $ua.isFromPc() ? 'z-web' : 'z-phone']">
    <div v-if="$ua.isFromPc()" class="web-box">
      <div class="video-desc-left" v-if="$ua.isFromPc()">
        <client-only>
          <video-player
            ref="videoPlayer"
            @play="onPlayerPlay($event)"
            :playsinline="true"
            :options="playerOptions"
            class="u-video video-player vjs-custom-skin"
          />
        </client-only>
        <div class="show-content">
          <div class="left-menu">
            <ul>
              <li :class="['title', index === active ? 'active-title' : '']" v-for="(item, index) in menuList" :key="index" @click="handleMenu(item.id, index)">
                {{ item.name }}
              </li>
            </ul>
          </div>
          <div class="right-content">
            <div class="desc" ref="desc">
              <!-- <div class="title">
                内容
              </div> -->
              <ul>
                <li v-for="(item, index) in videoData.video_detail?.split(' ')" :key="index">
                  {{ item }}
                </li>
              </ul>
            </div>
            <div class="explain" ref="explain">
              <div class="title">
                说明
              </div>
              <div class="desc">
                {{ videoData.video_comment }}
              </div>
            </div>
            <!-- <div class="comment-area" ref="commentArea">
              <div class="comment-area-title" ref="commentArea">
                评论(13)
              </div>
              <div class="comment-input">
                <img class="head-img" src="@/static/img/user/headImg.jpg" alt="">
                <el-input
                  v-model="comment"
                  type="textarea"
                  resize="none"
                  maxlength="2000"
                  show-word-limit
                />
              </div>
              <div class="release-comment" @click="releaseComment">
                发布评论
              </div>
            </div> -->
          </div>
        </div>
      </div>
      <div class="video-desc-right" v-if="$ua.isFromPc()">
        <div class="title">
          {{ videoData.video_name || videoData.name }}
        </div>
        <div class="second-title">
          {{ videoData.video_comment || videoData.introduction }}
        </div>
        <div class="line" />
        <div class="personal-info">
          <!-- <div>{{ getUserPhoto('art', videoData.art_id, 'photo') }}</div> -->
          <img class="head-img" :src="videoData.artinfo?.photo" alt="">
          <div class="user">
            <div class="name">
              {{ videoData.artinfo?.name }}
            </div>
            <div class="position">
              {{ videoData.artinfo?.position }}
            </div>
          </div>
          <div class="info-follow" @click="handleFollow(videoData.art_id, videoData?.art_info?.is_focus)">
            <img v-if="videoData?.art_info?.is_focus == 1" src="@/static/img/follow_active.png" alt="">
            <img v-else src="@/static/img/follow.png" alt="">
            关注
          </div>
        </div>
        <div class="desc">
          {{ videoData.artinfo?.introduction }}
        </div>
        <div class="btn">
          <div class="collect all-center" @click="handleCollect(videoData?.is_focus)">
            <img v-if="videoData?.is_focus" src="@/static/img/editPersonalHome/favorite_active.png" alt="">
            <img v-else src="@/static/img/editPersonalHome/favorite_solid.png" alt="">
            {{ videoData.collect_times || videoData.focus_total }}
          </div>
          <div class="share all-center" @click="handleShare">
            <img src="@/static/img/editPersonalHome/share.png" alt="">
            分享
          </div>
        </div>
        <div class="recommend">
          推荐
        </div>
        <div @click="goDesc(item)" class="recommend-list" v-for="(item, index) in recommendList" :key="index">
          <el-image v-if="item.video_page" fit="cover" :src="item.video_page" alt="" />
          <div class="info">
            <div class="title">
              {{ item.video_name }}
            </div>
            <div class="name">
              {{ item.art_name }}
            </div>
          </div>
        </div>
        <div class="show-more" v-show="recommendList > 5">
          <div class="btn all-center" @click="seeMore">
            查看更多
          </div>
        </div>
      </div>
      <div class="video-info" v-if="!$ua.isFromPc()">
        <div class="title">
          {{ videoData.video_name || videoData.name }}
        </div>
        <div class="second-title">
          {{ videoData.video_comment || videoData.introduction }}
        </div>
        <div class="line" />
        <div class="personal-info">
          <!-- <div>{{ getUserPhoto('art', videoData.art_id, 'photo') }}</div> -->
          <img class="head-img" :src="getUserPhoto('art', videoData.art_id, 'photo')" alt="">
          <div class="user">
            <div class="name">
              {{ videoData.artinfo?.name }}
            </div>
            <div class="position">
              {{ videoData.artinfo?.position }}
            </div>
          </div>
          <div class="info-follow" @click="handleFollow(videoData.art_id, videoData?.art_info?.is_focus)">
            <img v-if="videoData?.art_info?.is_focus == 1" src="@/static/img/follow_active.png" alt="">
            <img v-else src="@/static/img/follow.png" alt="">
            关注
          </div>
        </div>
        <client-only>
          <video-player
            ref="videoPlayer"
            @play="onPlayerPlay($event)"
            :playsinline="true"
            :options="playerOptions"
            class="u-video video-player vjs-custom-skin"
          />
        </client-only>
        <div class="video-comment">
          {{ videoData.video_comment }}
        </div>
        <div class="btn">
          <div class="collect all-center" @click="handleCollect(videoData?.is_focus)">
            <img v-if="videoData?.is_focus" src="@/static/img/editPersonalHome/favorite_active.png" alt="">
            <img v-else src="@/static/img/editPersonalHome/favorite_solid.png" alt="">
            {{ videoData.collect_times || videoData.focus_total }}
          </div>
          <div class="share all-center" @click="handleShare">
            <img src="@/static/img/editPersonalHome/share.png" alt="">
            分享
          </div>
        </div>
      </div>
    </div>
    <div v-else class="phone-box">
      <div class="user-info">
        <div class="name">
          {{ videoData.video_name || videoData.name }}
        </div>
        <div class="second-name">
          {{ videoData.video_comment || videoData.introduction }}
        </div>
        <div class="line" />
      </div>
      <div class="personal-info">
        <!-- <div>{{ getUserPhoto('art', videoData.art_id, 'photo') }}</div> -->
        <img class="head-img" :src="videoData.artinfo?.photo" alt="">
        <div class="user">
          <div class="name">
            {{ videoData.artinfo?.name }}
          </div>
          <div class="position">
            {{ videoData.artinfo?.position }}
          </div>
        </div>
        <div class="info-follow all-center" @click="handleFollow(videoData.art_id, videoData?.art_info?.is_focus)">
          <img v-if="videoData?.art_info?.is_focus == 1" src="@/static/img/follow_active.png" alt="">
          <img v-else src="@/static/img/follow.png" alt="">
          关注
        </div>
      </div>
      <client-only>
        <video-player
          ref="videoPlayer"
          @play="onPlayerPlay($event)"
          :playsinline="true"
          :options="playerOptions"
          class="u-video video-player vjs-custom-skin"
        />
      </client-only>
      <div class="video_comment">
        {{ videoData.video_comment }}
      </div>
      <div class="btn">
        <div class="collect all-center" @click="handleCollect(videoData?.is_focus)">
          <img v-if="videoData?.is_focus" src="@/static/img/editPersonalHome/favorite_active.png" alt="">
          <img v-else src="@/static/img/editPersonalHome/favorite_solid.png" alt="">
          {{ videoData.collect_times || videoData.focus_total }}
        </div>
        <div class="share all-center" @click="handleShare">
          <img src="@/static/img/editPersonalHome/share.png" alt="">
          分享
        </div>
      </div>
      <div class="detial" v-show="videoData.video_detail?.split(' ').length > 0">
        <div class="name">
          详情
        </div>
        <div class="desc" ref="desc">
          <!-- <div class="title">
            内容
          </div> -->
          <ul>
            <li v-for="(item, index) in videoData.video_detail?.split(' ')" :key="index">
              {{ item }}
            </li>
          </ul>
        </div>
      </div>
      <div class="explain" ref="explain" v-show="videoData.video_comment">
        <div class="title">
          说明
        </div>
        <div class="desc">
          {{ videoData.video_comment }}
        </div>
      </div>
      <div class="recommend">
        <div class="name">
          推荐
        </div>
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide swiper-no-swiping" v-for="(item, index) in recommendList" @click="goDesc(item)" :key="index">
              <el-image v-if="item.video_page" :src="item.video_page" fit="cover" alt="" />
              <div class="info">
                <div class="name">
                  {{ item.video_name }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="show-more">
          <div class="btn all-center" @click="lookMore">
            查看更多
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import videoList from './videoList'
import Swiper from 'swiper'
import { Swiper as SwiperClass, Navigation, Pagination } from 'swiper'
import 'swiper/swiper-bundle.css'
import { getUserPhoto } from '@/utils/downloadFile'
export default {
  name: '',
  scrollToTop: true,
  components: {},
  props: {},
  data () {
    return {
      playerOptions: {},
      comment: '',
      followActive: false,
      videoList: [],
      showMore: false,
      collectActive: false,
      videoData: {},
      menuList: [
        {
          id: 'desc',
          name: '详情'
        },
        {
          id: 'explain',
          name: '说明'
        },
        // {
        //   id: 'commentArea',
        //   name: '评论'
        // },
      ],
      active: 0
    }
  },
  asyncData({ route }) {
    // console.log(route.query.data)
  },
  computed: {
    recommendList() {
      return this.showMore ? this.videoList : this.videoList.slice(0, 4)
    }
  },
  watch: {
    '$route' (to, from) {
    // 路由发生变化页面刷新
      this.$router.go(0);
    }
  },
  created () {},
  mounted () {
    this.$nextTick(() => {
      SwiperClass.use([Navigation, Pagination])
      this.swiper = new SwiperClass('.swiper-container', {
        slidesPerView: 'auto',
        // autoplay: true,
        observer: true,
        observeParents: true,
        paginationClickable: true,
        noSwiping: true,
        spaceBetween: 24,
        // navigation: {
        //   nextEl: '.swiper-button-next',
        //   prevEl: '.swiper-button-prev',
        //   disabledClass: 'my-button-disabled'
        // },
        on: {
          slideChange:(swiper) => {
            // console.log(this.$)
            this.VideoChange(swiper.activeIndex)
          }
        }
      })
    })
    this.playerOptions = {
      playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
      autoplay: false, // 如果true,浏览器准备好时开始回放。
      aspectRatio: '4:3', // 播放器高宽占比（例如"16:9"或"4:3"）
      muted: false, // 默认情况下将会消除任何音频。
      loop: false, // 导致视频一结束就重新开始。
      preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
      language: 'zh-CN',
      aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
      fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
      sources: [
        {
          type: 'video/mp4', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
          src: 'http://221.12.172.138:908/Upload/2021-01-11-11-27-56-1306734.mp4' // url地址
        }
      ],
      poster: '', // 封面地址
      // width: document.documentElement.clientWidth, //播放器宽度
      notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
      controlBar: {
        timeDivider: true,
        durationDisplay: true,
        remainingTimeDisplay: false,
        fullscreenToggle: true // 全屏按钮
      },
      preload: "auto"
    },
    this.getVideoDesc()
    this.getRecommentVideos()
  },
  methods: {
    lookMore() {
      this.$router.push('/onlineVideo')
    },
    getUserPhoto,
    // 进入视频详情页
    goDesc(data) {
      this.$router.push({ path: '/onlineVideo/desc', query: { data_id: data.data_id } })
    },
    handleMenu(id, index) {
      this.active = index
      // 获取元素在页面中的位置
      let top1 = this.$refs[id]?.getBoundingClientRect().top
      // 获取滚动条位置
      let top2 = document.body.scrollTop||document.documentElement.scrollTop
      window.scrollTo({
        top:top1 + top2 - 128, // 相加即为元素实际顶部距离
        left:0,
        behavior: "smooth"
      })
    },
    getRecommentVideos() {
      this.$api.getOnlineVideo({}).then(res => {
        if (res.status == '$SUCCESS') {
          this.videoList = Array.isArray(res.result.item_list) ? res.result.item_list : []
          console.log('res.result.item_list', this.videoList)
        }
      })
    },
    getVideoDesc() {
      const params = {
        data_id: this.$route.query.data_id
      }
      let api
      if (this.$route.query.type == 2) {
        api = 'getWorkInfo'
      } else {
        api = 'getVideoDesc'
      }
      this.$api[api](params).then(res => {
        console.log('res', res)
        if (res.status == '$SUCCESS') {
          this.videoData = res.result
          if (this.$route.query.type) {
            this.videoData.artinfo = this.videoData.art_info
          }
          this.playerOptions['sources'][0]['src'] = res.result.video_path || res.result.work_video
          this.playerOptions['poster'] = res.result.video_page || ''
        }
      })
    },
    releaseComment() {
      if (this.comment) {
        console.log(this.comment)
      } else {
        this.$message.warning('请输入评论再点击发布')
      }
    },
    onPlayerPlay(e) {
      // this.$refs.videoPlayer.player.requestFullscreen()
    },
    handleFollow(art_id, is_focus) {
      if (this.$store.state.user.token) {
        if (is_focus - 0 !== 1) {
          this.$api.artFocus({ art_id: art_id }, {}).then(res => {
            if (res.status == "$SUCCESS") {
              this.$message.success('关注成功')
              this.getVideoDesc()
            }
          })
        } else {
          this.$message.warning('您已关注该以艺术家')
        }
      } else {
        this.$message.warning('请您先登陆')
        this.$store.commit("user/SET_LOGIN", true);
      }
    },
    handleCollect(is_focus) {
      if(this.$store.state.user.token) {
        if (!is_focus) {
          // this.collectActive = !this.collectActive
          this.$api.workFocus({ work_id: this.videoData.data_id - 0 }, {}).then(res => {
            if (res.status == "$SUCCESS") {
              this.$message.success('收藏成功')
              this.getWorkInfo()
            }
          })
        } else {
          this.$message.warning('您已收藏该作品')
        }
      } else {
        this.$message.error('请先登陆')
      }
    },
    handleShare() {
      //创建input标签
      const input = document.createElement('input')
      //将input的值设置为需要复制的内容
      input.value = window.location.href
      //添加input标签
      document.body.appendChild(input)
      //选中input标签
      input.select()
      //执行复制
      document.execCommand('copy')
      //成功提示信息
      this.$message.success('复制链接成功!')
      //移除input标签
      document.body.removeChild(input)
    },
    seeMore() {
      this.showMore = true
    }
  }
}
</script>

<style scoped lang="less">
.video-desc {
  &.z-web {
    .web-box {
      padding: 60px 132px 80px;
      background: #fff;
      display: flex;
    }
    .video-desc-left {
      width: 1176px;

      .show-content {
        display: flex;
        margin-bottom: 20px;
        margin-top: 60px;

        .left-menu {
          // display: inline-block;

          ul {
            width: 40px;
            margin-right: 108px;

            .title {
              font-size: 18px;
              color: #999;
              margin-bottom: 40px;
              cursor: pointer;

              &:last-child {
                margin-bottom: 0;
              }

              &.active-title {
                color: #000;
              }
            }
          }
        }

        .right-content {
          width: 100%;
          font-size: 18px;
          color: #000;

          .desc {
            margin-bottom: 60px;
            .title {
              font-size: 14px;
            }

            ul li {
              font-size: 18px;
              font-weight: 400;
              color: #000000;
            }
          }

          .explain {
            color: #333;
            margin-bottom: 60px;

            .title {
              margin-bottom: 30px;
              font-size: 14px;
              font-weight: bold;
              color: #000;
            }
          }

          .comment-area {
            // padding: 60px 0 0 148px;

            .comment-area-title {
              line-height: 16px;
              font-size: 14px;
              font-weight: bold;
              color: #000;
              margin-bottom: 30px;
            }

            .comment-input {
              display: flex;

              .head-img {
                width: 46px;
                height: 46px;
                border-radius: 50%;
                margin-right: 16px;
              }

              ::v-deep(.el-textarea__inner) {
                background: #f5f5f5;
              }

              ::v-deep(.el-textarea .el-input__count) {
                background: #f5f5f5;
              }
            }

            .release-comment {
              width: 100px;
              height: 36px;
              background: #E0CBB4;
              cursor: pointer;
              font-size: 14px;
              font-weight: bold;
              color: #333;
              display: inline-flex;
              float: right;
              justify-content: center;
              align-items: center;
              margin-top: 16px;
            }
          }
        }
      }
    }

    .video-desc-right {
      width: 457px;
      margin-left: 23px;

      .title {
        font-size: 24px;
        font-weight: bold;
        color: #000;
      }

      .second-title {
        font-size: 18px;
        color: #000;
        margin: 16px 0 32px;
      }

      .line {
        width: 100%;
        height: 1px;
        background: #E8E8E8;
        margin-bottom: 22px;
      }

      .personal-info {
        position: relative;

        .head-img {
          width: 58px;
          height: 58px;
          border-radius: 50%;
          vertical-align: top;
          margin-right: 11px;
          position: relative;
          top: -5px;
        }

        .user {
          display: inline-block;
          font-size: 16px;
          color: #333;
        }

        .info-follow {
          position: absolute;
          right: 0;
          bottom: 6px;
          cursor: pointer;
          line-height: 16px;
          font-size: 16px;
          color: #000;
        }

        .content {
          font-size: 14px;
          color: #333;
        }
      }

      .desc {
        font-size: 14px;
        color: #333;
        margin: 30px 0;
      }

      .btn {
        display: flex;
        font-size: 16px;
        font-family: Source Han Serif SC;
        font-weight: 400;
        color: #000;

        .collect,
        .share {
          width: 222px;
          height: 42px;
          border: 1px solid #E8E8E8;
          cursor: pointer;

          img {
            margin-right: 9px;
          }
        }

        .collect {
          margin-right: 13px;
          cursor: pointer;
        }
      }

      .recommend {
        font-size: 14px;
        font-weight: bold;
        color: #000;
        margin: 31px 0 16px;
      }

      .recommend-list {
        margin-bottom: 20px;
        cursor: pointer;

        ::v-deep(.el-image) {
          width: 200px;
          height: 150px;
          margin-right: 24px;
        }

        .info {
          width: 224px;
          display: inline-block;
          vertical-align: top;

          .title {
            font-size: 16px;
            font-weight: 600;
            color: #000;
            margin-bottom: 12px;
          }

          .name {
            font-size: 16px;
            font-weight: bold;
            color: #999;
          }
        }
      }

      .show-more {
        width: 100%;
        text-align: center;
        .btn {
          display: inline-flex;
          width: 148px;
          height: 32px;
          background: #F5F5F5;
          font-size: 14px;
          font-weight: bold;
          color: #333;
          cursor: pointer;
        }
      }
    }
  }

  &.z-phone {
    margin-top: pxtorem(88) !important;

    .phone-box {
      .user-info {
        padding: pxtorem(32);

        .name {
          font-size: pxtorem(36);
          font-weight: bold;
          color: #000;
          margin-bottom: pxtorem(13);
        }

        .second-name {
          font-size: pxtorem(24);
          font-weight: 400;
          color: #000000;
        }

        .line {
          width: 100%;
          height: 2px;
          background: #E8E8E8;
        }
      }

      .personal-info {
        padding: 0 pxtorem(32) pxtorem(32);

        .head-img {
          width: pxtorem(82);
          height: pxtorem(82);
          border-radius: 50%;
          margin-right: pxtorem(22);
        }

        .user {
          display: inline-block;
          vertical-align: text-bottom;

          .name {
            font-size: pxtorem(24);
            font-weight: 600;
            color: #333333;
            margin-bottom: pxtorem(16);
          }

          .position {
            font-size: pxtorem(22);
            font-weight: 400;
            color: #333333;
          }
        }

        .info-follow {
          float: right;
          width: pxtorem(132);
          height: pxtorem(50);
          border: 1px solid #E8E8E8;
          font-size: pxtorem(22);
          font-weight: 600;
          color: #000000;

          img {
            width: pxtorem(24);
          }
        }
      }

      .video_comment {
        font-size: pxtorem(22);
        font-weight: 400;
        padding: pxtorem(31) pxtorem(32) pxtorem(41);
      }

      .btn {
        text-align: center;
        margin-bottom: pxtorem(47);

        .share,
        .collect {
          width: pxtorem(322);
          height: pxtorem(50);
          border: 1px solid #E8E8E8;
          vertical-align: top;
          display: inline-flex;
          margin-right: pxtorem(30);

          &:last-child {
            margin-right: 0;
          }
        }
      }

      .detial {
        padding: 0 pxtorem(32) pxtorem(40);
        .name {
          font-size: pxtorem(22);
          font-weight: 600;
          color: #000000;
          margin-bottom: pxtorem(24);
        }

        .desc {
          ul li {
            font-size: pxtorem(24);
            font-weight: 400;
            color: #000000;
          }
        }
      }

      .explain {
        padding: 0 pxtorem(32) pxtorem(40);

        .title {
          font-size: pxtorem(22);
          font-weight: 600;
          color: #000000;
          margin-bottom: pxtorem(24);
        }

        .desc {
          font-size: pxtorem(24);
          font-weight: 400;
          color: #000000;
        }
      }

      .recommend {
        padding: 0 pxtorem(32) pxtorem(40);
        position: relative;

        .name {
          font-size: pxtorem(22);
          font-weight: 600;
          color: #000000;
          margin-bottom: pxtorem(24);
        }

        ::v-deep(.swiper-slide) {
          width: pxtorem(190);
          // height: pxtorem(104);
          position: relative;
          cursor: pointer;

          .el-image {
            width: 100%;
            height: pxtorem(104);
          }

          .info {
            .name {
              font-size: pxtorem(22);
              font-weight: 400;
              color: #333333;
            }
          }
          // margin-right: 24px;

          &:last-child {
            margin-right: 0;
          }
        }

        .show-more {
          position: absolute;
          top: 0;
          right: pxtorem(55);
        }
      }
    }
  }
}
</style>
